<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试CRUD</title>
        <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
        <link rel="stylesheet" href="${path}yq-big/static/css/el-com.css">
        <link rel="stylesheet" href="${path}yq-big/static/css/style.css">

        <script src="//unpkg.com/vue@next"></script>
        <script src="//unpkg.com/element-plus"></script>
        <script src="//unpkg.com/@element-plus/icons-vue"></script>
        <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
        <script src="//unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="list">
            <big-page :table-detail="tableDetail" :pagination-detail="paginationDetail"
                      :operation-detail="operationDetail" :form-detail="formDetail" style="padding: 10px"
                      @change-page="changePage" ref="pageRef"></big-page>
            <el-dialog v-model="dialogTableVisible" title="查看个人详情" width="800px">
                <big-form :form-detail="formDiaDetail"></big-form>
            </el-dialog>
            <big-form-transmit ref="transmitRef"></big-form-transmit>

        </div>
        <script type="module">
            import bigPage from '/yq-big/components/page/bigPage.js'
            import bigForm from '/yq-big/components/form/bigForm.js'
            import bigFormTransmit from '/yq-big/components/formTransmit/bigFormTransmit.js'
            import request from '/yq-big/utils/request.js'

            const List = {
                data() {
                    return {
                        formDetail: {
                            formArray: [
                                {
                                    basicInfo: {
                                        name: 'id',
                                        label: '测试标题',
                                    },
                                },
                                {

                                    basicInfo: {
                                        name: 'name',
                                        label: '姓名',
                                    },
                                    operation: {
                                        clearable: true,
                                    },
                                },
                                {
                                    type: 'date',
                                    basicInfo: {
                                        type: 'datetimerange',
                                        name: ['startTime','endTime'],
                                        default:[],
                                        label: '创建时间',
                                        format: 'YYYY-MM-DD HH:mm:ss',
                                        valueFormat: 'YYYY-MM-DD HH:mm:ss',
                                        defaultTime: [
                                            new Date(2000, 1, 1, 0, 0, 0),
                                            new Date(2000, 2, 1, 23, 59, 59),
                                        ]
                                    },
                                    operation: {
                                        clearable: true,
                                    },

                                },
                            ],
                        },

                        dialogTableVisible: false,
                        operationDetail: [{
                            value: '搜索',//按钮显示内容
                            type: 'primary',//按钮类型
                            plain: true,//按钮朴素
                            beforeIcon: 'Search',//按钮前图标
                            method: this.seachClick
                        }, {
                            value: '新增',//按钮显示内容
                            type: 'primary',//按钮类型
                            plain: true,//按钮朴素
                            method: this.addClick//按钮点击触发事件
                        }],

                        tableDetail: {
                            tableData:  ${@jsKit.parser(items)},
                            tableLabel: [
                                {
                                    label: "编号",
                                    prop: 'id',
                                }, {
                                    label: "姓名",
                                    prop: 'name',
                                }, {
                                    label: "创建时间",
                                    prop: 'createTime',
                                }
                            ],
                            operationDetail: [
                                {
                                    name: '详情',//按钮显示内容
                                    icon: 'Place',//按钮前图标
                                    method: this.detailClick
                                }, {
                                    type: 'conceal',//操作台下拉
                                    name: '更多',
                                    icon: 'Orange',
                                    detail: [//下拉数据
                                        {
                                            name: '修改数据',
                                            method: this.updateClick//按钮点击触发事件
                                        }, {
                                            name: '删除',
                                            icon: 'Delete',
                                            method: this.delClick//按钮点击触发事件
                                        }
                                    ]
                                },
                            ],
                        },

                        paginationDetail: {
                            pageSize: 20,
                            pageNum: 20,
                            total: 2000,
                        },
                    }
                },
                components: {

                    bigPage, bigForm,bigFormTransmit
                },
                methods: {
                    changePage() {
                        console.log('我要分页')
                        console.log(this.paginationDetail)
                    },
                    seachClick() {
                        let data = this.$refs.pageRef.getFormData();
                        var id = data.id;
                        var name = data.name;
                        var createTime = data.createTime;
                        console.log(id);
                        console.log(name);
                        console.log(createTime);
                        this.$refs.transmitRef.submit("http://127.0.0.1:8081/test/list", 'get', {id: id, name: name});
                    },
                    addClick() {
                        console.log("新增按钮被点击")
                        window.location = "http://127.0.0.1:8081/test/add";
                    },
                    delClick(user) {
                        console.log("删除按钮被点击", user);
                        var id = user.row.id;
                        console.log(user.row.id);
                        // this.delMenu(id);
                        window.location = "http://127.0.0.1:8081/test/del?id=" + id;
                    },
                    updateClick(user) {
                        console.log("查看详情按钮被点击", user);
                        var id = user.row.id;
                        window.location = "http://127.0.0.1:8081/test/edit?id=" + id;
                    },
                    detailClick(user) {
                        console.log("查看详情按钮被点击", user);
                        var id = user.row.id;
                        window.location = "http://127.0.0.1:8081/test/info?id=" + id;
                    },
                }
            };

            const list = Vue.createApp(List);
            list.use(ElementPlus, {
                locale: ElementPlusLocaleZhCn,
            });
            for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
                list.component(key, component)
            }
            list.mount("#list");
        </script>

    </body>
</html>
